<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <title>缓动的小球</title>
    <style>
      body
      {
        background-color: #F3EFE0;
      }
      .bot
      {
        color: #918E84;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 24px;
        position: relative;
        top: 300px;
        right: 250px;
        float: right;
      }
      #box{position:absolute;width:120px;height:120px;line-height:120px;text-align:center;background:red;color:#fff;border-radius:60px;}
    </style>
  </head>
  <body>
    <div id="box">点我啊，跑！</div>
    <script>
      function animate(obj, option) {
        clearInterval(obj.timer);                           
        obj.timer = setInterval(function() {
          var flag = true;                                  
          for (var k in option) {
            var leader = parseInt(getStyle(obj, k)) || 0;   
            var target = option[k];                         
            var step = (target - leader) / 10;              
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;           
            obj.style[k] = leader + 'px';     
            if (leader != target) {           
              flag = false;
            }
          }
          if (flag) {                         
            clearInterval(obj.timer);
          }
        }, 15);
      }
      function getStyle(obj, attr) {
        if (window.getComputedStyle) {       
          return window.getComputedStyle(obj, null)[attr];
        } else {                             
          return obj.currentStyle[attr];
        }
      }
      var obj = document.getElementById('box');
      obj.onclick = function() {
        animate(obj, {'left': 200, 'top': 50});
      };
    </script>
    <div class="bot">
      <input type="button" value="返回" onclick="location.href = '../章节目录/第八章.html'">
      <br><br><br><br><br><br><br><br>
      <h3>Please appreciate((●'◡'●))......</h3>
    </div>
  </body>
</html>